// 竖向柱状图
const loadVBarChart = (echarts, dom, data, cfg) => {
  if (!dom) return false;
  const isSmallScreen = window.screen.width < 1600;
  var option = {
    grid: {
      top: cfg['top'] || 15,
      left: 0,
      right: 0,
      bottom: cfg['bottom'] || 0,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (p) {
        return p[0].name + '：' + p[0].value
      }
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: '#999',
        fontWeight: isSmallScreen ? 100 : 600,
        fontSize: isSmallScreen ? 10 : cfg['axisLabelFontSize'] || 12,
        rotate: 20
      },
      data: data && data.name || [],
    },
    yAxis: {
      type: 'value',
      barWidth: cfg['barWidth'] || 15,
      axisLabel: {
        color: '#666',
        fontSize: isSmallScreen ? 10 : 12,
      },
      minInterval: cfg['minInterval'] || 20,
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: cfg['splitLineColor'] || '#333',
          width: 0.5
        }
      },
    },
    series: [
      {
        data: data && data.value || [],
        type: 'bar',
        barWidth: cfg['barWidth'] || 15,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
            {offset: 1, color: 'rgba(12,222,201,1)'},
            {offset: 0, color: 'rgb(1,107,171,.8)'}
          ]),
        },
        label: {
          show: true,
          position: 'top',
          distance: 2,
          color: "#999",
          fontSize: isSmallScreen ? 10 : 12,
        }
      }
    ]
  };
  let chart = echarts.getInstanceByDom(dom);
  if (chart) {
    // chart.clear();
    // chart && chart.dispose();
  } else {
    chart = echarts.init(dom, 'macarons');
  }
  chart.setOption(option, true);
  window.onresize = chart.resize;
  return chart;
};

// 竖向双柱状图
const loadVDblBarChart = (echarts, dom, data, cfg) => {
  if (!dom) return false;
  const isSmallScreen = window.screen.width < 1600;
  var option = {
    grid: {
      top: '40',
      left: 0,
      right: 0,
      bottom: cfg.bottom || 0,
      containLabel: false
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (p) {
        return p[0].name + '：' + p[0].value + 'km/' + p[0].seriesName + '；' + p[1].value + 'km/' + p[1].seriesName
      }
    },
    legend: {
      show: true,
      top: '10',
      right: '20',
      icon: 'circle',
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: '#999',
        fontSize: isSmallScreen ? 10 : 14,
        fontWeight: isSmallScreen ? 100 : 600
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        axisLabel: {
          color: '#999',
          fontWeight: isSmallScreen ? 100 : 600,
          fontSize: isSmallScreen ? 10 : 12,
          rotate: 20
        },
        data: data && data['name'] || []
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位：km',
        nameTextStyle: {
          fontSize: isSmallScreen ? 10 : 12,
          padding: [0, 30, 0, 0]		//  内填充
        },
        axisLabel: {
          color: '#666'
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: '#333',
            width: 0.5
          }
        }
      }
    ],
    series: [
      {
        name: data && data['type'][0],
        type: 'bar',
        barWidth: cfg['barWidth'] || 15,
        label: {
          show: true,
          position: 'top',
          distance: 2,
          color: "#999",
          fontSize: isSmallScreen ? 10 : 12
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
            {offset: 1, color: 'rgba(12,222,201,1)'},
            {offset: 0, color: 'rgb(1,107,171,.8)'}
          ]),
        },
        data: data && data['value'][0] || []
      },
      {
        name: data && data['type'][1] || '',
        type: 'bar',
        barWidth: cfg['barWidth'] || 15,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
            {offset: 1, color: 'rgba(29,125,255,.8)'},
            {offset: 0, color: 'rgb(0,46,106)'}
          ]),
        },
        label: {
          show: true,
          position: 'top',
          distance: 2,
          color: "#999",
          fontSize: isSmallScreen ? 10 : 12
        },
        data: data && data['value'][1] || []
      }
    ]
  };
  let chart = echarts.getInstanceByDom(dom);
  if (chart) {
    // chart.clear();
    // chart && chart.dispose();
  } else {
    chart = echarts.init(dom, 'macarons');
  }
  chart.setOption(option, true);
  window.onresize = chart.resize;
  return chart;
};

// 横向柱状图
const loadHBarChart = (echarts, dom, data, cfg) => {
  if (!dom) return false;
  const isSmallScreen = window.screen.width < 1600;
  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{b} : {c}' + (cfg['unit'] || '')
    },
    grid: {
      top: 10,
      left: cfg['left'] || 0,
      right: cfg['right'] || 0,
      bottom: 0,
      containLabel: true
    },
    xAxis: {
      type: "value",
      splitLine: {
        show: false
      },
      max: cfg['allNum'],
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      }
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          inside: true,
          color: '#999',
          verticalAlign: "bottom",
          align: "left",
          padding: [0, 0, cfg['fontBottom'] || 8, -5],
          fontSize: isSmallScreen ? 12 : cfg['labelFontSize'] || 14,
          fontWeight: isSmallScreen ? 100 : 600,
          fontFamily: 'D-DIN-PRO'
        },
        data: data && data.name || [],
      }, {
        type: "category",
        inverse: true,
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          inside: true,
          color: 'rgba(27,243,222,.6)',
          verticalAlign: "bottom",
          align: "right",
          padding: [0, 0, cfg['numBottom'] || 8, 0],
          fontSize: isSmallScreen ? 12 : cfg['labelFontSize'] || 14,
          fontWeight: isSmallScreen ? 100 : 600,
          fontFamily: 'D-DIN-PRO',
          formatter: function (p) {
            return p + (cfg['unit'] || '')
          }
        },
        data: data && data.value || [],
      }
    ],
    series: [
      {
        name: 'bar',
        type: 'bar',
        barWidth: cfg['barWidth'] || 5,
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {offset: 0, color: 'rgba(12,222,201,.8)'},
            {offset: 1, color: 'rgb(1,107,171,1)'}
          ]),
          borderWidth: 1,
          borderColor: "#0E5889"
        },
        data: data && data.value || []
      }
    ],
  };
  let chart = echarts.getInstanceByDom(dom);
  if (chart) {
    // chart.clear();
    // chart && chart.dispose();
  } else {
    chart = echarts.init(dom, 'macarons');
  }
  chart.setOption(option, true);
  window.onresize = chart.resize;
  return chart;
};

// 饼图
const loadPieChart = (echarts, dom, data, cfg) => {
  if (!dom) return false;
  const isSmallScreen = window.screen.width < 1600;
  var option = {
    legend: {
      orient: 'vertical',
      top: 'center',
      right: cfg['legendRight'] || 0,
      icon: 'circle',
      itemWidth: 8,
      itemHeight: 8,
      borderColor: '#000',
      itemGap: 5,
      textStyle: {
        color: '#999',
        fontSize: isSmallScreen ? 10 : cfg['legendFontSize'] || 14,
        fontWeight: isSmallScreen ? 100 : 600
      },
      selectedMode: false
    },
    series: [
      {
        name: '饼图',
        type: 'pie',
        radius: cfg['radius'] || ['50%', '80%'],
        center: cfg['center'] || ['35%', '50%'],
        avoidLabelOverlap: false,
        // silent:true, //取消鼠标事件
        color: cfg['color'] || [],
        label: {
          show: false,
          position: 'center',
        },
        itemStyle: {
          borderWidth: 1,
          borderColor: '#111629'
        },
        emphasis: {
          label: {
            show: true,
            color: '#ddd',
            formatter: '{small|{b}}\n{big|{d}} {percent|%}\n{small|{c}' + (cfg['unit'] || '') + '}',
            rich: {
              big: {
                fontSize: isSmallScreen ? 10 : cfg['bigFontSize'] || 16,
                lineHeight: isSmallScreen ? 14 : cfg['bigFontSize'] + 2 || 16,
                fontFamily: 'tapeworm'
              },
              small: {
                fontSize: isSmallScreen ? 10 : cfg['smallFontSize'] || 14,
                lineHeight: isSmallScreen ? 14 : cfg['smallFontSize'] + 2 || 14 + 2,
                fontWeight: isSmallScreen ? 100 : 600,
                color: 'rgba(27,243,222,.6)'
              },
              percent: {
                fontSize: isSmallScreen ? 10 : 12
              },
            }
          }
        },
        labelLine: {
          show: false
        },
        data: data || []
      }
    ]
  };
  let chart = echarts.getInstanceByDom(dom);
  if (chart) {
    // chart.clear();
    // chart && chart.dispose();
  } else {
    chart = echarts.init(dom, 'macarons');
  }
  chart.setOption(option, true);

  const fnTimer = () => {
    var dataLen = option.series[0].data.length;
    if (chart._disposed) {
      clearInterval(chart.timer);
      return false;
    }

    // 取消之前高亮的图形
    chart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: chart.currentIndex
    });
    chart.currentIndex = (chart.currentIndex + 1) % dataLen;
    // 高亮当前图形
    chart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: chart.currentIndex
    });
  };

  let timer = chart['timer'];
  if (!timer) {
    if (!cfg['noFlash']) {
      chart.currentIndex = -1;
      chart['timer'] = setInterval(fnTimer, 1000);
      timer = chart['timer'];
    }

  }

  if (!cfg['noFlash']) {
    chart.on('mouseover', () => {
      clearInterval(timer);
      chart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: chart.currentIndex
      });
      chart.currentIndex = -1;
    });
    chart.on('mouseout', () => {
      timer = setInterval(fnTimer, 1000);
    });
  }

  window.onresize = chart.resize;
  return chart;
};

// 百分比环形图
const loadRingChart = (echarts, dom, data, cfg) => {
  if (!dom) return false;
  const isSmallScreen = window.screen.width < 1600;
  var option = {
    legend: {
      orient: 'horizontal ',
      bottom: '0',
      left: 'center',
      icon: 'none',
      textStyle: {
        color: '#999',
        fontSize: isSmallScreen ? 12 : 14,
        fontWeight: isSmallScreen ? 100 : 600,
        padding: [0, 0, 3, -38],
      },
      selectedMode: false
    },
    series: [
      {
        name: "ring",
        type: "pie",
        radius: ["45%", "60%"],
        center: ["50%", "40%"],
        label: {
          show: false,
        },
        itemStyle: {
          color: '#1D7BFF'
        },
        data: [
          {
            value: data.percent,
            label: {
              show: true,
              color: '#ddd',
              position: "center",
              formatter: '{big|{d}} {percent|%} \n{small|' + data.value + ' ' + (cfg['unit'] || '') + '}',
              rich: {
                big: {
                  fontSize: isSmallScreen ? 12 : cfg['bigFontSize'] || 14,
                  lineHeight: isSmallScreen ? 14 : cfg['bigFontSize'] + 4 || 16,
                  fontFamily: 'tapeworm'
                },
                small: {
                  fontSize: isSmallScreen ? 10 : cfg['smallFontSize'] || 12,
                  lineHeight: isSmallScreen ? 14 : cfg['smallFontSize'] + 4 || 14,
                  fontWeight: isSmallScreen ? 100 : 600,
                  fontFamily: 'tapeworm',
                  color: 'rgba(27,243,222,.6)'
                },
                percent: {
                  fontSize: isSmallScreen ? 10 : 12
                },
              }
            }
          },
          {
            value: 100 - data.percent,  // 计算剩下没加载的进度
            name: data['name'],
            itemStyle: {
              color: "rgba(19, 45, 83, 1)"
            },
          },
        ],
      },
      {
        name: "",
        type: "pie",
        radius: ["68%", "71%"],   //大小
        center: ["50%", "40%"],  // 位置
        label: {
          show: false,
        },
        color: ['rgba(19, 45, 83, 1)'],
        data: [100]
      }
    ],
  };

  let chart = echarts.getInstanceByDom(dom);
  if (chart) {
    // chart.clear();
    // chart && chart.dispose();
  } else {
    chart = echarts.init(dom, 'macarons');
  }
  chart.setOption(option, true);
  window.onresize = chart.resize;
  return chart;
};

// 线图
const loadLineChart = (echarts, dom, data) => {
  if (!dom) return false;
  const isSmallScreen = window.screen.width < 1600;
  const option = {
    grid: {
      top: 30,
      left: 0,
      right: 15,
      bottom: 10,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (p) {
        return p[0].name + '：' + p[0].value
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        color: '#999',
        fontSize: isSmallScreen ? 10 : 12,
      },
      data: data && data.name || ['12:00', '12:00', '12:00', '12:00', '12:00', '12:00']
    },
    yAxis: {
      type: 'value',
      // min:50,
      // interval:50,
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: '#333',
          width: 0.5
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: isSmallScreen ? 10 : 12
      }
    },
    series: [
      {
        data: data && data.value || [100, 200, 300, 350, 380, 500],
        type: 'line',
        // smooth: true,
        lineStyle: {
          color: 'rgba(255,201,38,.5)'
        },
        // areaStyle: {
        //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        //     {offset: 1, color: 'rgba(12,222,201,.8)'},
        //     {offset: 0, color: 'rgb(1,107,171,1)'}
        //   ]),
        // }，
        label: {
          show: true,
          position: 'top',
          distance: 2,
          color: "#999",
          fontSize: isSmallScreen ? 10 : 12,
        }
      }
    ]
  };
  let chart = echarts.getInstanceByDom(dom);
  if (chart) {
    // chart.clear();
    // chart && chart.dispose();
  } else {
    chart = echarts.init(dom, 'macarons');
  }
  chart.setOption(option, true);
  window.onresize = chart.resize;
  return chart;
};

// 多线图
const loadMultLineChart = (echarts, dom, data, cfg) => {
  if (!dom) return false;
  const isSmallScreen = window.screen.width < 1600;
  const option = {
    grid: {
      top: 10,
      left: 30,
      right: 15,
      bottom: 30,
      containLabel: false
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        color: '#999',
        fontSize: 12,
      },
      data: data && data.label || []
    },
    yAxis: {
      type: 'value',
      interval: 50,
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: cfg['splitLineColor'] || '#333',
          width: 0.5
        }
      },
    },
    series: []
  };

  if (data && data.value) {
    option.series = [];
    data.value.forEach((item, index) => {
      option.series.push({
        name: data['name'][index],
        type: 'line',
        data: item
      })
    })
  }

  let chart = echarts.getInstanceByDom(dom);
  if (chart) {
    // chart.clear();
    // chart && chart.dispose();
  } else {
    chart = echarts.init(dom, 'macarons');
  }
  chart.setOption(option, true);
  window.onresize = chart.resize;
  return chart;
};

export default {
  loadVBarChart,
  loadHBarChart,
  loadVDblBarChart,
  loadPieChart,
  loadRingChart,
  loadLineChart,
  loadMultLineChart
}
